<template>
	<view class="audio">
		<view class="yinpin">
			<!-- 音频播放进度条 -->
			<img class="heipan" src="https://lesson.iapeap.com/yinpincidai.png" alt="" />
			<view class="" style="300rpx">
				<van-slider :value="progress" :min="0" :max="duration" @change="onDrag" @drag-start="dragStart"
					@drag-end="dragEnd">
					<view class="custom-button" slot="button"></view>
				</van-slider>
			</view>
			<!-- 音频播放时间信息 -->
			<view class="audiotime">
				<view class="start">
					{{ secondsToMinutesAndSeconds(currentTime) }}
				</view>
				<view class="end" style="color: aliceblue">
					{{ secondsToMinutesAndSeconds(duration) }}
				</view>
			</view>
			<!-- 播放/暂停按钮 -->
			<img class="zanting" v-if="playing" src="https://lesson.iapeap.com/images/sleep/bofangzhong.png"
				@click="togglePlayback" alt="" />
			<img class="zanting" v-else src="https://lesson.iapeap.com/zanting.png" @click="togglePlayback" alt="" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			audiourl: String,
			 audioName: [String, Number],
			currentAudio: Object,
			setCurrentAudio: Function,
		},
		data() {
			return {
				playing: false,
				duration: 0,
				currentTime: 0,
				progress: 0,
				backgroundAudioManager: null,
			};
		},
		onLoad() {
			this.backgroundAudioManager = wx.getBackgroundAudioManager();
		},

		methods: {
			// 初始化音频播放器 (点击时才初始化)
			initAudio() {
				
				if (this.backgroundAudioManager) return;

				this.backgroundAudioManager = wx.getBackgroundAudioManager();
				this.backgroundAudioManager.src = this.audiourl;
				this.backgroundAudioManager.singer = "睡眠训练营"
				this.backgroundAudioManager.title = this.audioName ||  "好睡音频" ;
				this.backgroundAudioManager.coverImgUrl = "https://lesson.iapeap.com/QQ20250319-173750.png"; // 可以加封面图
				this.backgroundAudioManager.autoplay = false;

				// 确保 duration 能正确获取
				this.backgroundAudioManager.onCanplay(() => {
					setTimeout(() => {
						this.duration = this.backgroundAudioManager.duration || 0;
					}, 500);
				});

				// 监听状态更新
				this.backgroundAudioManager.onTimeUpdate(() => {
					this.currentTime = this.backgroundAudioManager.currentTime;
					this.progress = this.backgroundAudioManager.currentTime;
					this.playing = true;
				});

				this.backgroundAudioManager.onEnded(() => {
					this.playing = false;
				});

				this.backgroundAudioManager.onPause(() => {
					this.playing = false;
				});
			},

			togglePlayback() {
				if (this.currentAudio && this.currentAudio !== this) {
					this.currentAudio.stopAudio();
				}

				this.setCurrentAudio(this);

				if (!this.backgroundAudioManager) this.initAudio();

				if (this.playing) {
					this.backgroundAudioManager.pause();
					this.playing = false;
				} else {
					this.backgroundAudioManager.src = this.audiourl; // 💥 重点，每次重新赋值
					this.backgroundAudioManager.title =  "好睡音频";
					this.backgroundAudioManager.play();
					this.playing = true;
				}
			},


			stopAudio() {
				if (this.backgroundAudioManager) {
					this.backgroundAudioManager.stop();
					this.backgroundAudioManager = null;
					this.playing = false;
				}
			},

			onDrag(event) {
				this.currentTime = event.detail;
				this.backgroundAudioManager.seek(event.detail);
			},

			dragStart() {
				this.backgroundAudioManager.pause();
			},

			dragEnd() {
				this.backgroundAudioManager.play();
			},

			secondsToMinutesAndSeconds(seconds) {
				let minutes = Math.floor(seconds / 60);
				let remainingSeconds = Math.floor(seconds % 60);
				return minutes + ":" + (remainingSeconds < 10 ? "0" + remainingSeconds : remainingSeconds);
			},
		},

		beforeDestroy() {
			this.stopAudio();
		},
	};
</script>


<style lang="scss">
	.audio {
		display: flex;
		justify-content: center;
	}

	.audiotime {
		display: flex;
		width: 300rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 18rpx;
		color: #70a8ef;
		line-height: 16rpx;
		text-align: left;
		font-style: normal;
		justify-content: space-between;
		position: relative;
		bottom: 60rpx;
		left: 50rpx;
	}

	.yinpin {
		width: 542rpx;
		height: 138rpx;
		background: rgba(182, 216, 252, 0.6);
		border-radius: 32rpx;

		.heipan {
			width: 124rpx;
			height: 124rpx;
			position: relative;
			left: 400rpx;
			bottom: 30rpx;
		}

		.zanting {
			width: 40rpx;
			height: 40rpx;
			position: relative;
			bottom: 70rpx;
			left: calc(50% - 100rpx);
		}

		.van-slider {
			position: relative;
			bottom: 100rpx;
			margin-left: 50rpx;
			width: 300rpx;
			height: 4rpx;
			background-color: #c6dbf1 !important;
		}

		.van-slider__button {
			width: 15rpx;
			height: 15rpx;
			border-radius: 50%;
			background-color: pink !important;
		}
	}
</style>